<template>
  <div class="page">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入标题" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="通用分类" prop="cloudMarketGeneralClassification">
            <el-select v-model="form.cloudMarketGeneralClassification" placeholder="请选择通用分类" style="width: 100%"
              clearable>
              <el-option v-for="i in generalList" :key="i.id" :label="i.name" :value="i.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="第三方企业" prop="corporateName">
            <el-input v-model="form.corporateName" placeholder="请输入公司名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务电话" prop="servicePhone">
            <el-input v-model="form.servicePhone" maxlength="11" placeholder="请输入服务电话" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="服务邮箱" prop="serviceEmail">
            <el-input v-model="form.serviceEmail" placeholder="请输入服务邮箱" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行业分类" prop="cloudMarketIndustryClassification">
            <el-select v-model="form.cloudMarketIndustryClassification" placeholder="请选择行业分类" style="width: 100%"
              clearable>
              <el-option v-for="i in industryList" :key="i.id" :label="i.name" :value="i.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="图片" prop="picture">
            <Image-upload v-model="form.picture" :limit="1" :isShowTip="false" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业图片" prop="picture">
            <Image-upload v-model="form.corporateImg" :limit="1" :isShowTip="false" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="产品说明" prop="description">
        <Editors :content="form.description" v-model="form.description" refValue="description" :quillIndex="0" />
      </el-form-item>
      <el-form-item label="商品介绍" prop="intro">
        <Editors :content="form.intro" v-model="form.intro" refValue="intro" :quillIndex="1" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import {
  listCloudType,
  addCloudConfig,
  updateCloudConfig,
  marketInfo
} from "@/api/configManagement/cloudMarketConfig";
export default {
  data() {
    return {
      form: {},
      // 表单校验
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        intro: [
          { required: true, message: "商品介绍不能为空", trigger: "blur" },
        ],
        description: [{ required: true, message: "产品说明不能为空", trigger: "blur" }],
        // core: [{ required: true, message: "核心功能不能为空", trigger: "blur" }],
        // advantage: [{ required: true, message: "优势分析不能为空", trigger: "blur" }],
        picture: [{ required: true, message: "图片不能为空", trigger: "blur" }],
        corporateImg: [{ required: true, message: "图片不能为空", trigger: "blur" }],
        corporateName: [{ required: true, message: "公司名称不能为空", trigger: "blur" }],
        servicePhone: [
          { required: true, message: "服务电话不能为空", trigger: "blur" },
          // {
          //   pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          //   message: "请输入正确的电话号码",
          //   trigger: "blur",
          // },
        ],
        serviceEmail: [
          { required: true, message: "服务邮箱不能为空", trigger: "blur" },
          // 邮箱验证
          {
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
        cloudMarketIndustryClassification: [
          { required: true, message: "行业分类不能为空", trigger: "blur" },
        ],
        cloudMarketGeneralClassification: [
          { required: true, message: "通用分类不能为空", trigger: "blur" },
        ],
      },
      generalList: [], // 通用分类列表
      industryList: [], // 行业分类列表
      marketId: '',//云市场的id
    }
  },
  created() {
    if (this.$route.query.id) {
      this.marketId = this.$route.query.id;
      this.getMarketInfo();
    }
    this.getTypeList();
  },
  methods: {
    /**获取云市场详情 */
    getMarketInfo() {
      marketInfo(this.marketId).then(res => {
        if (200 === res.code) {
          this.form = res.data;
        }
      })
    },
    // 获取分类列表
    getTypeList() {
      listCloudType().then((res) => {
        this.generalList = res.data.cloudMarketGeneralClassification;
        this.industryList = res.data.cloudMarketIndustryClassification;
      });
    },
    // 通用分类名称
    getGeneralType(id) {
      let row = this.generalList.find((item) => item.id === id);
      return row ? row.name : "";
    },
    // 行业分类名称
    getIndustryType(id) {
      let row = this.industryList.find((item) => item.id === id);
      return row ? row.name : "";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.marketId) {
            updateCloudConfig(this.form).then((res) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              // this.getList();
              this.$router.push('/configManagement/cloudMarketConfig');
            });
          } else {
            addCloudConfig(this.form).then((res) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              // this.getList();
              this.$router.push('/configManagement/cloudMarketConfig');
            });
          }
        } else {
          this.$nextTick(() => {
            let isError = document.getElementsByClassName('is-error');
            isError[0]?.scrollIntoView({
              // 滚动到指定节点
              // 值有start,center,end，nearest，当前显示在视图区域中间
              block: 'center',
              // 值有auto、instant,smooth，缓动动画（当前是慢速的）
              behavior: 'smooth',
            })
          })
          return
        }

      });
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$router.push('/configManagement/cloudMarketConfig');
    },
    // 表单重置
    reset() {
      this.form = {
        marketId: null,
        title: "",
        intro: "",
        description: "",
        picture: "",
        corporateImg: '',
        corporateName: "",
        servicePhone: "",
        serviceEmail: "",
        cloudMarketGeneralClassification: "",
        cloudMarketIndustryClassification: "",
        // advantage: "",
        // core: "",
      };
      this.resetForm("form");
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding: 20px 50px;
}
</style>